<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="品牌专区" name="zone">
        <div class="search">
          <span class="tit">品牌名称:</span>
          <el-input placeholder="请输入" v-model="group_name" size="mini">
          </el-input>
          <span class="tit">开启状态:</span>
          <el-select placeholder="请选择" v-model="enable" size="mini">
            <el-option value="1" label="开启"></el-option>
            <el-option value="0" label="关闭"></el-option>
          </el-select>
          <el-button size="mini" type="primary" @click="search">搜索</el-button>
          <el-button size="mini" type="primary" @click="reset">重置</el-button>
        </div>
        <el-table :data="list" style="width: 100%" border :height="oheight">
          <el-table-column align="center" prop="group_name" label="品牌名称">
          </el-table-column>
          <el-table-column align="center" label="品牌图片">
            <template slot-scope="scope">
              <el-image style="height: 80px" :src="scope.row.icon"></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="前端展示状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                active-value="1"
                inactive-value="0"
                @change="changeEnable(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" label="复制链接">
            <template slot-scope="scope">
              <el-button type="text" @click="copyLink(scope.row)"
                >复制链接</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <span class="separated">丨</span>
              <template>
                <el-popconfirm
                  title="确定删除该品牌吗？"
                  @confirm="deleteGroup(scope.row)"
                >
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
              <span class="separated">丨</span>
              <el-button type="text" @click="goodsInformation(scope.row)"
                >商品信息</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-button size="mini" type="primary" @click="addGroup"
            >新增品牌</el-button
          >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <el-drawer
          :title="editGroup ? '编辑品牌' : '新增品牌'"
          size="50%"
          :before-close="handleClose"
          :visible.sync="drawerVisible"
        >
          <div class="drawerbox">
            <div class="item">
              <div class="tit"><span>*</span>品牌图标</div>
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="1"
                :on-change="uploadIcon"
                :on-remove="uploadRemove"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="item">
              <div class="tit"><span>*</span>品牌名称</div>
              <el-input v-model="sub_group_name"></el-input>
            </div>
            <div class="item">
              <div class="tit"><span>*</span>是否列表露出</div>
              <el-switch
                v-model="sub_enable"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </div>
            <div class="item">
              <div class="tit">归属店铺</div>
              <el-select
                v-model="sub_store_id"
                filterable
                remote
                :remote-method="remoteMethod"
              >
                <el-option
                  v-for="item in options"
                  :key="item.store_id"
                  :value="item.store_id"
                  :label="item.store_name"
                ></el-option>
              </el-select>
            </div>
            <div class="item">
              <div class="tit">排序</div>
              <el-input v-model="sub_sort"></el-input>
            </div>
            <div class="item sub">
              <el-button size="mini" @click="sub_reset">取消</el-button>
              <el-button size="mini" type="primary" @click="sub_submit"
                >确定</el-button
              >
            </div>
          </div>
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane label="商品信息" name="goods" v-if="information">
        <div class="search">
          <span class="tit">商品名称:</span>
          <el-input placeholder="请输入" v-model="good_name" size="mini">
          </el-input>
          <span class="tit">商品ID:</span>
          <el-input placeholder="请输入" v-model="good_id" size="mini">
          </el-input>
          <el-button size="mini" type="primary" @click="goods_search"
            >搜索</el-button
          >
          <el-button size="mini" type="primary" @click="goods_reset"
            >重置</el-button
          >
        </div>
        <el-table
          :data="goods_list"
          style="width: 100%"
          border
          :height="oheight"
        >
          <el-table-column
            align="center"
            prop="pgoods_id"
            label="商品ID"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pgoods_name"
            label="商品名称"
            width="500px"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pgoods_points"
            label="兑换元宝"
          ></el-table-column>
          <el-table-column align="center" prop="name" label="上架">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                active-value="1"
                inactive-value="0"
                @change="changeEnable1(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="add_edit(scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                title="确定删除该商品吗?"
                @confirm="add_delete(scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination">
            <el-button size="mini" type="primary" @click="addgoodsvisible = true">新增</el-button>
            <el-pagination
                @size-change="infoSizeChange"
                @current-change="infoCurrentChange"
                :current-page="infopag.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="infopag.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="infopag.total">
            </el-pagination>
        </div>
        <el-drawer
          :title="add_edits ? '编辑商品' : '新增商品'"
          :visible.sync="addgoodsvisible"
          size="50%"
          :before-close="addClose"
        >
          <div class="item">
            <div class="tit">选择商品</div>
            <el-input v-model="add_goods_id"></el-input>
            <el-button size="mini" type="primary" @click="add_goods_serch"
              >搜索</el-button
            >
          </div>
          <div class="item">
            <div class="tit">商品名称</div>
            <el-input disabled v-model="add_goods_name"></el-input>
          </div>
          <div class="item">
            <div class="tit">兑换积分</div>
            <el-input v-model="add_pgoods_points"></el-input>
          </div>
          <div class="item sub">
            <el-button size="mini" @click="add_reset">取消</el-button>
            <el-button size="mini" type="primary" @click="add_submit"
              >确定</el-button
            >
          </div>
        </el-drawer>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      oheight: 700,
      activeName: "zone",
      group_name: "",
      enable: "",
      list: [],
      currentPage4: 1,
      value: false,
      page: 1,
      pageSize: 20,
      total: 0,
      drawerVisible: false,
      sub_icon: new FormData(),
      sub_group_name: "",
      sub_enable: '1',
      sub_store_id: "",
      sub_sort: "",
      options: [],
      editGroup: false,
      editname: "",
      editid: "",
      fileList: [],
      information: false,
      group_id: "",
      good_name: "",
      good_id: "",
      good_ids: "",
      goods_list: [],
      addgoodsvisible: false,
      add_goods_id: "",
      add_goods_name: "",
      add_pgoods_points: "",
      pgoods_id: "",
      add_edits: false,
        infopag: {
            page: 1,
            size: 10,
            total:0
      }
    };
  },
  created() {
    this.getList();
  },
  watch: {
    activeName(news) {
      if (news != "goods") {
        this.information = false;
      }
    },
    fileList(nvalue){
      var d = document.querySelector('.el-upload')
      if(nvalue.length > 0 ){
        d.style.display = 'none'
      }else {
        d.style.display = 'block'
      }
    }
  },
  methods: {
    getList() {
      let data = {
        group_name: this.group_name,
        enable: this.enable,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$http
        .get("/admin/pointprod/index.php?act=pointGroup&op=index", {
          params: data,
        })
        .then((res) => {
          if (res.code == 1) {
            this.list = res.data.list;
            this.total = res.data.totalCount;
          }
        });
    },
    search() {
      this.getList();
    },
    reset() {
      this.group_name = "";
      this.enable = "";
      this.page = 1;
      this.pageSize = 20;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
      },
     infoSizeChange(val) {
      this.infopag.size = val;
      this.getGoodsList();
    },
    infoCurrentChange(val) {
      this.infopag.page = val;
      this.getGoodsList();
    },
    copyLink(row) {
      const aux = document.createElement("input");
      const content = row.url;
      aux.setAttribute("value", content);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      alert("复制成功!");
    },
    addGroup() {
      this.drawerVisible = true;
      this.remoteMethod();
    },
    remoteMethod(query) {
      let data = {
        page: 1,
        eachNum: 50,
        storeName: query,
      };
      this.$http
        .post("/admin/store/index.php?act=storeManage&op=getStoreList", data)
        .then((res) => {
          this.options = res.data.list;
        });
    },
    uploadIcon(file) {
      this.sub_icon = file.raw;
      this.fileList = [{url:file.url}]
    },
    uploadRemove() {
      this.sub_icon = "";
      this.fileList = []
    },
    sub_reset() {
      this.sub_icon = "";
      this.sub_group_name = "";
      this.sub_enable = '1';
      this.sub_store_id = "";
      this.sub_sort = "";
      this.options = [];
      this.drawerVisible = false;
      this.editGroup = false;
      this.fileList = []
    },
    sub_submit() {
      if (this.sub_group_name == "") {
        this.$message.warning("请填写品牌名称!");
        return;
      }
      let data = new FormData();
      data.set("group_name", this.sub_group_name);
      data.set("enable", this.sub_enable);
      var url;
      if (this.editGroup) {
        if (this.sub_store_id == this.editname) {
          data.set("store_id", this.editid || '');
        } else {
          data.set("store_id", this.sub_store_id || '');
        }
        if (this.sub_icon != "") {
          data.set("icon", this.sub_icon);
        }
        data.set("group_id", this.group_id);
        url = "/admin/pointprod/index.php?act=pointGroup&op=update";
      } else {
        if (this.sub_icon == "") {
          this.$message.warning("请上传品牌图标!");
          return;
        }
        data.set("icon", this.sub_icon);
        data.set("store_id", this.sub_store_id);
        url = "/admin/pointprod/index.php?act=pointGroup&op=add";
      }

      data.set("sort", this.sub_sort);
      this.$http.post(url, data).then((res) => {
        if (res.code == 1) {
          if (this.editGroup) {
            this.$message.success("修改成功!");
          } else {
            this.$message.success("上传成功!");
          }
          this.sub_reset();
          this.getList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    handleClose() {
      this.sub_reset();
      this.drawerVisible = false;
      this.editGroup = false;
      this.editid = "";
      this.fileList = [];
    },
    edit(row) {
      this.$http
        .get(
          `/admin/pointprod/index.php?act=pointGroup&op=get&group_id=${row.group_id}`
        )
        .then((res) => {
          if (res.code == 1) {
            this.sub_icon = "";
            this.sub_group_name = res.data.group_name;
            this.sub_enable = res.data.enable;
            this.sub_store_id = res.data.store_name;
            this.sub_sort = res.data.sort;
            this.fileList = [{ url: res.data.icon }];
            this.group_id = res.data.group_id;
            this.editGroup = true;
            this.editname = res.data.store_name;
            this.editid = res.data.store_id;
            this.options = [];
            this.drawerVisible = true;
          }
        });
        this.remoteMethod();
    },
    deleteGroup(row) {
      let data = {
        group_id: row.group_id,
        is_delete: 1,
      };
      this.$http
        .post("/admin/pointprod/index.php?act=pointGroup&op=update", data)
        .then((res) => {
          if (res.code == 1) {
            this.$message.success("删除成功!");
            this.getList();
          }
        });
    },
    goodsInformation(row) {
      this.information = true;
      this.activeName = "goods";
      this.group_id = row.group_id;
      this.getGoodsList();
    },
    getGoodsList() {
      let data = {
        group_id: this.group_id,
        pgoods_id: this.good_id,
          pgoods_name: this.good_name,
          page: this.infopag.page,
        pageSize: this.infopag.size
      };
      this.$http
        .get("/admin/pointprod/index.php?act=pointGroupGoods&op=index", {
          params: data,
        })
        .then((res) => {
          if (res.code == 1) {
              this.goods_list = res.data.list;
              this.infopag.total = res.data.totalCount;
          }
        });
    },
    goods_search() {
      this.getGoodsList();
    },
    goods_reset() {
      this.good_name = "";
      this.good_id = "";
      this.getGoodsList();
    },
    changeEnable(row) {
      this.$http
        .post("/admin/pointprod/index.php?act=pointGroup&op=update", {
          group_id: row.group_id,
          enable: row.enable,
        })
        .then((res) => {
          console.log(res, "res");
          if (res.code == 1) {
            this.$message.success("修改成功!");
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    changeEnable1(row) {
      this.$http
        .post("/admin/pointprod/index.php?act=pointGroupGoods&op=update", {
          id: row.id,
          enable: row.enable,
          pgoods_points: row.pgoods_points,
          pgoods_id: row.pgoods_id,
        })
        .then((res) => {
          console.log(res, "res");
          if (res.code == 1) {
            this.$message.success("修改成功!");
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    add_goods_serch() {
      this.$http
        .get(
          `/admin/pointprod/index.php?act=pointGroupGoods&op=get&pgoods_id=${this.add_goods_id}`
        )
        .then((res) => {
          console.log(res, "res");
          if (res.code == 1) {
            this.add_goods_name = res.data.pgoods_name;
            this.add_pgoods_points = res.data.pgoods_points;
            this.pgoods_id = this.add_goods_id;
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    addClose() {
      this.add_goods_name = "";
      this.add_pgoods_points = "";
      this.pgoods_id = "";
      this.add_goods_id = "";
      this.good_ids = "";
      this.addgoodsvisible = false;
      this.add_edits = false;
    },
    add_reset() {
      this.addClose();
    },
    add_submit() {
      var data;
      var url;
      if (this.add_edits) {
        url = "/admin/pointprod/index.php?act=pointGroupGoods&op=update";
        data = {
          id: this.good_ids,
          pgoods_points: this.add_pgoods_points,
          pgoods_id: this.pgoods_id,
        };
      } else {
        url = "/admin/pointprod/index.php?act=pointGroupGoods&op=add";
        data = {
          pgoods_id: this.pgoods_id,
          group_id: this.group_id,
          pgoods_points: this.add_pgoods_points,
        };
      }
      this.$http.post(url, data).then((res) => {
        if (res.code == 1) {
          if (this.add_edits) {
            this.$message.success("修改成功!");
          } else {
            this.$message.success("添加成功!");
          }
          this.addClose();
          this.getGoodsList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    add_edit(row) {
      this.add_edits = true;
      this.add_goods_name = row.pgoods_name;
      this.good_ids = row.id;
      this.add_pgoods_points = row.pgoods_points;
      this.pgoods_id = row.pgoods_id;
      this.add_goods_id = row.pgoods_id;
      this.addgoodsvisible = true;
    },
    add_delete(row) {
      console.log(row, "delete");
      this.$http
        .post("/admin/pointprod/index.php?act=pointGroupGoods&op=update", {
          id: row.id,
          is_delete: 1,
          pgoods_points: row.pgoods_points,
          pgoods_id: row.pgoods_id,
        })
        .then((res) => {
          if (res.code == 1) {
            this.$message.success("删除成功!");
            this.getGoodsList();
          }
        });
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.el-tab-pane {
  padding: 15px;
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.el-input {
  width: 180px;
}
.tit {
  font-size: 14px;
}
.el-input,
.el-select {
  margin: 0 30px 0 10px;
}
.el-table {
  margin: 20px 0;
}
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.separated {
  color: #409eff;
}
.drawerbox {
  padding: 20px;
}
.item {
  display: flex;
  flex-direction: row;
  margin: 20px 0;
  .el-input,
  .el-select {
    width: 200px;
    margin: 0;
  }
  .tit {
    width: 120px;
    text-align: right;
    margin-right: 20px;
    span {
      color: red;
    }
  }
}
.el-upload {
  width: 200px;
  height: 200px;
}
.sub {
  margin-top: 80px;
  padding-left: 50px;
}
</style>
